<template>
    <div style="position: relative;height: 100vh;">
        <!-- 登录界面 -->
        <div style="display: flex;width: 100vw;position: relative;">
            <van-icon name="cross" size="6vw" style="top: 3vw;left: 3vw;" @click="backIndex" />
            <div style="position: absolute;right: 3vw;top: 3vw;" @click="returnRegister">注册</div>
        </div>
        <!-- logo -->
        <div style="width: 100vw;display: flex;">
            <img src="../../assets/app-logo11.png" alt="" style="width: 300px;margin: auto;">
        </div>
        <div style="width: 100vw;display: flex;flex-wrap: wrap;">
            <div style="margin: auto;">
                <van-cell-group class="zh">
                    <van-field style="width: 100vw;" v-model="uname" label="账号" placeholder="请输入手机号码" :left-icon="require(`../../assets/zh.png`)"
                    @blur="checkUname" />
                </van-cell-group>
                <span v-show="show" id="email_message" class="message">请确认手机号码</span>
            </div>
            <div style="margin: auto;">
                <van-cell-group>
                    <van-field style="width: 100vw;" v-model="password" type="password" label="密码" placeholder="请输入密码" :left-icon="require(`../../assets/mm.png`)"
                    @blur="checkUpwd" />
                </van-cell-group>
                <span v-show="show1" id="upwd_message" class="message">请确认密码</span>
            </div>
            <div style="position: relative;width: 100vw;">
                <a href="/forget" @click="goForget" style="font-size: 8px;color: #c8cace;position: absolute;right: 20px;top: 10px;">忘记密码?</a>
            </div>
        </div>
        <div style="margin-top: 40px;display: flex;">
            <button class="login" @click="check">登录</button>
        </div>
        <div style="display: flex;position: absolute;bottom: 5vh;width: 100vw;">
            <van-checkbox v-model="checked" checked-color="#f03d37" style="font-size: 10px;margin: auto;" icon-size="10px" name="1">
                我已阅读并同意《用户隐私政策》
            </van-checkbox>
        </div>
    </div>
</template>

<script>
    import httpApi from '@/http'
    import qs from "qs"
    import { Toast } from 'vant';
    export default {
        data() {
            return {
                uname: '',
                password: '',
                checked: false,
                show: false,
                show1: false,
                form:{
                    phone:'',
                    pwd:''
                }
            }
        },
        methods: {
            backIndex() {
                this.$router.push('/home/index')
            },
            returnRegister(){
                this.$router.push('/register')
            },
            goForget(){
                this.$router.push('/forget')
            },
            checkUname() {
                let exp = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                if (exp.test(this.uname)) {
                    this.show = false
                } else {
                    this.show = true
                }
            },
            // 密码格式验证
            checkUpwd() {
                let exp = /^[0-9]{6,18}$/;
                if (exp.test(this.password)) {
                    this.show1 = false
                } else {
                    this.show1 = true
                }
            },
            check(){
                if(true){
                    this.form.phone = this.uname
                    this.form.pwd = this.password
                    console.log(this.form);
                    httpApi.loginApi.queryuser(this.form).then(res => {
                        console.log(res);
                        if(res.data.code == 400){
                            Toast.fail('手机号或密码错误!')
                            return
                        }else{
                            if(!this.checked){
                                Toast.fail('请勾选《用户隐私政策》')
                                return
                            }else{
                                localStorage.setItem('user',JSON.stringify(res.data.data[0]))
                                this.$router.push('/home/index')
                            }
                        }
                    })
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
.login {
    color: #fff;
    background-color: #f03d37;
    width: 80%;
    height: 5vh;
    margin: auto;
    border-radius: 20px;
    border: none;
}
.message {
  box-sizing: border-box;
  width: 100%;
  margin:auto;
  display: flex;
  justify-content: end;
  font-size: 8px;
  color: red;
}
</style>